<extend name="Public:index" />
<block name="mycss">
    <style>
        .check_box{
    display: inline-block;
    height: 20px;
    overflow: hidden;
}   
.action_btn{
			display: flex;
			justify-content:space-around;
		} 
</style>
</block>
<block name="main-content">
    <div class="container-fluid">
        <form class="" method="post" action="{:U('set_template_detail')}" target="ajaxifr">
            <div class="row">
                <div class="col-md-12 col-lg-8">
                    <div class="card">
                        <div class="card-body">
                            <h4 class="mt-0 header-title">监控点位设计</h4>
                            <p class="text-muted">选择需要添加的点位
                            </p>

                            <div class="table-responsive-sm">
                                <table id="footable" class="table  mb-0">
                                    <thead class="thead-light">
                                        <tr>
                                            <th scope="col">末端设备</th>
                                            <th scope="col">监控内容</th>
                                            <th scope="col">信号类型</th>
                                            <th scope="col">是否显示</th>
                                            <th scope="col">是否打勾</th>
                                        </tr>
                                    </thead>
                                    <tbody class="table-sm">
                                        <volist name="show_list" id="vo" key="k">
                                            <volist name="vo.list" id="sub_vo">
                                                <tr class="{$i}">
                                                    <if condition="$i eq 1">
                                                        <td class="" rowspan="{$vo['count']}">
                                                            <div class="checkbox checkbox-success">
                                                                <input id="checkbox_{$sub_vo.id}" class="min_input"
                                                                    data-action="type_{$k}" type="checkbox" <if
                                                                    condition="$sub_vo[tpl_param_id] gt 0 OR $is_save eq 0">checked
                                                    </if>>
                                                    <label for="checkbox_{$sub_vo.id}">
                                                        {$vo['name']}
                                                    </label>
                            </div>
                            </td>
                            </if>
                            <td class="">{$sub_vo['device_param_name']}</td>
                            <td class="">{$sub_vo['sign_name']}</td>
                            <td class="">
                                <span class="checkbox check_box checkbox-single checkbox-success">
                                    <input type="checkbox" class="type_{$k}" <if condition="$sub_vo[tpl_param_id] gt 0 OR $is_save eq 0 ">checked</if>
                                    id="checkbox_show_{$sub_vo.id}" name="data[{$sub_vo.id}][param_show]">
                                    <label class="">{$sub_vo[tpl_param_id]}</label>
                                </span>
                            </td>
                            <td class="">
                                <span class="checkbox check_box checkbox-single checkbox-success">
                                    <input data="<if condition='$sub_vo[is_count] eq 1'>{$sub_vo['sensor_name']}</if>"
                                        data_group="{$sub_vo['sensor_type_group']}" control_data="{$sub_vo['control_name']}"
                                        control_group="{$sub_vo['control_type_group']}" control_sotrs="{$sub_vo['control_sorts']}"
                                        type="checkbox" class="type_{$k} type_select" <if condition='$sub_vo[is_select] gt 0 OR $is_save eq 0'>checked</if>
                                    id="checkbox_select_{$sub_vo.id}" name="data[{$sub_vo.id}][param_select]">
                                    <label class="">{$sub_vo[is_select]}</label>
                                </span>
                            </td>
                            </tr>
                            </volist>
                            </volist>

                            </tbody>
                            </table>
                            <!--end /table-->
                        </div>
                        <!--end /tableresponsive-->
                    </div>
                </div>
            </div>
            <div class="col-md-12 col-lg-4">
                <div class="card">
                    <div class="card-body">
                        <h4 class="mt-0 header-title">选型结果</h4>
                        <p class="text-muted">选型数据显示</p>
                        <div class="table-responsive">
                            <table class="table mb-0">
                                <thead class="thead-light">
                                    <tr>
                                        <th>专用控制器配置</th>
                                        <th>数量（个）</th>
                                    </tr>
                                </thead>
                                <tbody id="control">



                                </tbody>
                                <thead class="thead-light">
                                    <tr>

                                        <th>末端设备</th>
                                        <th>数量（个）</th>

                                    </tr>
                                </thead>
                                <tbody id="sensor">

                                </tbody>
                            </table>
                            <!--end /table-->
                        </div>
                        <!--end /tableresponsive-->
                        <div class="dropdown-divider mb-4"></div>
                        <input type="hidden" name="id" value="{$id}" />
                        <input type="hidden" name="module_id" value="{$template.module_id}" />
                        <input type="hidden" name="template_id" value="{$template.id}" />

                        <div class="mt-4 action_btn">

                            <button type="button" class="btn btn-secondary waves-effect px-4">返回模板</button>
                            <button type="submit" class="btn btn-primary  px-4">保存 数据</button>
                        </div>
                    </div>
                </div>
            </div>
    </div>
    </form>

    </div><!-- container -->
</block>
<block name="myscript">
    <script>
        $('.min_input').on('click', function (e) {
            console.log($(this).data());
            console.log($(this).prop('checked'));
            var child = $(this).data().action;
            var state = $(this).prop('checked')
            $('.' + child).prop('checked', state)
        })
        function setResult() {
            //控制器类型
            var control_list = new Array();
            var sensor_list = new Array();
            var inputs = $(".type_select");
            var cpn = "{$template.cpn}";
            control_list = addArray(control_list, cpn, "1", "1");
            inputs.each(function () {
                var state = $(this).prop('checked')
                if (state) {
                    //取得控件名称
                    var data_name = $(this).attr("data");
                    var data_group = $(this).attr("data_group");
                    if (data_name != "") {
                        sensor_list = addArray(sensor_list, data_name, data_group, "1");
                    }
                    var control_name = $(this).attr("control_data");
                    var control_group = $(this).attr("control_group");
                    var control_sotrs = $(this).attr("control_sotrs");
                    if (control_name != "") {
                        control_list = addArray(control_list, control_name, control_group, control_sotrs);
                    }

                }

            });
            control_str = "";
            //按照SAGE排序
            var control_list = control_list.sort(
                function (a, b) {
                    return (a.sorts - b.sorts);
                }
            );
            for (i = 0; i < control_list.length; i++) {
                control_str = control_str + "<tr><td>" + control_list[i].name + "</td><td>" + control_list[i].group.length + "</td></tr>"
            }
            sensor_str = "";
            for (i = 0; i < sensor_list.length; i++) {
                sensor_str = sensor_str + "<tr><td>" + sensor_list[i].name + "</td><td>" + sensor_list[i].group.length + "</td></tr>"
            }
            $("#control").html(control_str);
            $("#sensor").html(sensor_str);
        }
        $(function () {
            setResult();
            $('input:checkbox').click(function () {

                setResult();

            });
        });

        function addArray(list, name, group, sorts) {
            for (i = 0; i < list.length; i++) {
                var tempobj = list[i];
                if (tempobj.name == name) {
                    if ($.inArray(group, tempobj.group) >= 0) {
                        return list;

                    } else {
                        list[i].group.push(group);
                        return list
                    }
                }
            }
            var addobj = new Object();
            addobj.name = name;
            addobj.sorts = sorts;
            addobj.group = new Array();
            addobj.group.push(group);
            list.push(addobj);
            return list;

        }
    </script>
</block>